<template>
	<view class="content">
		<!-- 确认支付弹窗 -->
		<uni-popup :show="type === 'pay'" position="middle" mode="fixed" @hidePopup="togglePopup('')" style="position: relative;">
			<view class="uni-tip">
				<text class="uni-tip-content">输入安全密码</text>
				<view style="padding:0 20upx 40upx 20upx;font-size: 30upx;color: #333;text-align: center;" v-if="paymentype=='VoluntaryPayment'||paymentype=='BalancePayment'">
					<input type="password" placeholder="请输入安全密码" v-model="safeword">
				</view>
				<view class="uni-tip-group-button">
					<text class="uni-tip-button" @click="togglePopup('')" style="border-right: 1px solid #eee;">取消</text>
					<text class="uni-tip-button" @click="confirmOrder()">确定</text>
				</view>
			</view>
		</uni-popup>
		<view class="pageHeader">
			{{mytitle}}
			<a class="generalBack" @click="backpage()" hover-class="none">
				<image src="/static/b-1.png" style="width: 18upx;height: 30upx;"></image>
			</a>
		</view>
		<view class="orderbox">
			<!-- 地址 -->
			<view class="addressbox flex aic jsb" @click="chooseAdd">
				<view class="flex aic" style="max-width: 80%;"  v-if="myaddress">
					<image src="../../static/p-6.png" class="addressicon" ></image>
					<view class="abuotmsg">
						<view style="margin-bottom: 8upx;">{{myaddress.name}} <text style="color: #666;margin-left: 8upx;">{{myaddress.tel}}</text></view>
						<view>{{myaddress.province_name}}{{myaddress.city_name}}{{myaddress.county_name}}{{myaddress.address}}</view>
					</view>
				</view>
				<view style="margin-left: 30upx;font-size: 26upx;color: #666;" class="flex-3" v-else>
					<view>请去添加收货地址</view>
				</view>
				<image src="../../static/f-1.png" class="fingle"></image>
			</view>
			<!-- 支付方式 -->
			<view class="paybox">
				<view class="flex aic jsb choosetype" @click="showcontent">
					
					<view><text>{{paymenttxt==''?'选择支付方式':paymenttxt}}</text><text style="color: #EC6104;" v-if="paymenttxt==''">(VS支付不支持退款、退货)</text></view>
					<image src="../../static/f-1.png" class="fingle fingle-up"></image>
				</view>
				<view v-show="payshow">
					<view>
						<radio-group @change="radioChange">
							<view v-for="(item,index) in typeItems" :key="index" class=" flex aic jsb" style="border-top: 2upx solid #eee;margin-right: 16upx;padding:20upx 20upx;">
								<view class="flex aic">
									<label class="label-2-text" :for="item.name">
										<text>{{item.name}}</text>
									</label>
								</view>
								<radio :id="item.name" :value="index" :checked="item.checked" color="#EC6104" style="transform:scale(0.8)"></radio>
							</view>
						</radio-group>
					</view>
				</view>
			</view>
			<!-- 商品信息 -->
			<view>
				<view style="margin: 20upx 0;border-radius: 20upx;font-size: 30upx;color: #333;background-color: #fff;">
					<view style="border-bottom: 2upx solid #eee;text-indent: 20upx;padding: 10upx 0;" v-if="myitem.company!==null">
						{{myitem.company.company_name}}
					</view>
					<view>
						<view class="flex" style="position: relative;padding:20upx 30upx 10upx;">
							<view style="width: 146upx;height: 146upx;">
								<image :src="myitem.images" style="width: 100%;height: 100%;"></image>
							</view>
							<view class="flex-1" style="font-size: 28upx;color: #666;margin-left: 16upx;max-width: 400upx;">
								<view class="goods-info">{{myitem.title}}</view>
								<view style="font-size: 26upx;margin-top: 4upx;">总价：<text style="color: #EC6104;">￥{{ (Number(myitem.price)*goodnum).toFixed(2)}}</text>
								</view>
							</view>
							<view style="color:333;font-size: 26upx;margin-left: 16upx;">
								<view>￥{{myitem.price}}</view>
								<view style="margin-top: 8upx;">X{{goodnum}}</view>
							</view>
						</view>
					</view>
					<view style="padding: 20upx;font-size: 26upx;">
						<view>
							配送方式：<text style="color: #666;">普通配送</text>
							<text style="float: right;font-size: 24upx;color: #999;">快递 免邮</text>
						</view>
						<view class="flex" style="margin-top: 30upx;">
							订单备注：
							<textarea value="" v-model="fundbackMsg" placeholder="选填，请先和商家协商一致" style="font-size: 26upx;color: #666;margin-left: 30upx;flex:1;"
							 maxlength="180" auto-height />
							</view>
					</view>
				</view>
			</view>
			<!-- 底部信息 -->
			
			<view class="action-section">
				<view style="padding: 0 20upx 0 60upx;width: 100%;" class="flex aic jsb">
					<text style="font-size: 26upx;color: #999;">共{{goodnum}}件</text>
					<view style="font-size: 30upx;color: #666;">合计：<text style="color: #EC6104;">￥ {{ (Number(myitem.price)*goodnum).toFixed(2)}}</text></view>
					<button class="ordersub" @click="subit">提交订单</button>
				</view>
			</view>
		</view>
	</view>
	</template>
	<script>
	import postAjax from '../../API/postAjax.js'
	import uniPopup from '../../components/uni-popup/uni-popup.vue'
	export default {
		data() {
			return {
				userToken:'',// token
				// 头部信息的展示
				fileList:{},//页面展示信息
				mytitle:'',
				bustype:0,
				myitem:{},//质权或者提货的商品信息
				// 支付方式
				paymenttxt:'',
				// 支付字段
				paymentype:'',
				paymentindex:null,
				// 安全密码
				safeword:'',
				type: '', // 弹窗
				// 规格
				goodspec:'',
				// 总价信息
				totalMsg:{},
				// 我的地址
				myaddress:{},
				// 货物id
				goodId:null,
				// 货物数量
				goodnum:1,
				payshow:false,
				// 订单备注
				fundbackMsg:'',
				typeItems:[
					{
						"id": "3",
						"name": "微信支付",
						"payment": "Weixin"
					},
					{
						"id": "4",
						"name": "余额支付",
						"payment": "BalancePayment"
					}
				],
				mybalance:0,//我的余额
			}
		},
		components: {
			uniPopup
		},
		onLoad(options) {
			let that = this
			that.myitem = JSON.parse(options.item)
			that.goodnum = options.buynum
			console.log(that.myitem,that.goodnum)
			that.bustype = options.type
			// type 1：普通商品 2：抢购3：公益仓，4：国际保税区 5:经销商置权 6经销商提货区 7代理置权8代理提货 9合伙人置权 10合伙人提货 11vs购买置权套装
			if(that.bustype == 5){
				that.mytitle = '经销商置权申请'
			}
			if(that.bustype == 6){
				that.mytitle = '经销商提货'
			}
			if(that.bustype == 7){
				that.mytitle = '代理商置权申请'
			}
			if(that.bustype == 8){
				that.mytitle = '代理商提货'
			}
			if(that.bustype == 9){
				that.mytitle = '合伙人置权申请'
			}
			if(that.bustype == 10){
				that.mytitle = '合伙人提货'
			}
			that.userToken = uni.getStorageSync('token')
			that.getAddressList()
		},
		methods: {
			// 返回上一页
			backpage(){
				uni.navigateBack({
					delta:1
				})
			},
			// 获取个人信息
			getUserInfo() {
				let that = this
				return new Promise((resolve, reject) => {
					postAjax('user/Center', {
						token: that.userToken
					}, function(data) {
						resolve(data.data);
					})
				})
			},
			// 获取默认地址
			getAddressList() {
				let that = this
				postAjax('UserAddress/Index', {token:that.userToken}, function(data) {
					if (data.code == 0) {
						let myOdress = data.data.filter(item=>item.is_default==1)
						that.myaddress = myOdress[0]
					}else{
						that.myaddress={}
					}
				})
			},
			// 弹窗
			async subit(){
				let that = this
				if(that.myaddress==undefined){
					uni.showToast({title: '请选择收货地址',icon: 'none',duration: 1000});
					return
				}
				if(that.paymentindex==null){
					uni.showToast({title: '请选择支付方式',icon: 'none',duration: 1000});
					return
				}
				let mbalance = await that.getUserInfo()
				if(that.paymentype=='BalancePayment'){
					if(Number(mbalance.balance)<(Number(that.myitem.price)*that.goodnum)){
						uni.showToast({
							icon: 'none',
							title:'余额不足'
						})
						return
					}
				}
				if(that.paymentype=='Weixin'){
					that.confirmOrder()
				}else{
					that.type = 'pay'
				}
			},
			confirmOrder(){
				let that = this
				let paydata = {
						token:that.userToken,
						address_id:that.myaddress.id,
						payment_id:that.typeItems[that.paymentindex].id,
						goods_id:that.myitem.id,
						buy_type:'goods',
						stock:that.goodnum,
						spec:that.goodspec,
						user_note:that.fundbackMsg,
				}
				if(that.paymentype=='BalancePayment'||that.paymentype=='VoluntaryPayment'){
					if(that.safeword==''){
						uni.showToast({title: '请输入安全密码',icon: 'none',duration: 1000});
						return
					}
					paydata.paypwd = that.safeword
				}
				console.log(paydata)
				postAjax('buy/add',paydata,function(data){
					console.log(data)
					let id=data.data
					if(data.code==0){
						postAjax('order/pay',{token:that.userToken,id:data.data},function(dat){
							console.log(dat)
							if(dat.code==0){
								
								if(dat.data.is_online_pay==0){
									uni.request({
										url: dat.data.data +"&token="+that.userToken+"&application=app",
										data: '',
										dataType: 'json',
										method: 'GET',										
										success: function(da) {
											
											console.log(da);
											
											if(da.data.code==0){
												uni.showToast({
													icon: 'none',
													title: '支付成功',
													duration: 3000
												});
												setTimeout(function(){
													uni.reLaunch({
														url:'../order/success?type=business'
													})
												},1000)
											}else{
												uni.showToast({
													icon: 'none',
													title: '支付失败',
													duration: 3000
												});
												setTimeout(function(){
													uni.navigateTo({
														url:'../user/index?state=1'
													})
												},1500)
											}																						
										},
										fail: function(data) {	
											uni.showToast({
												icon: 'none',
												title: '网络连接出错，请重试',
												duration: 3000
											});
										}
									})
									
								}else{
									let obj = dat.data.data
									// 第一种写法，传对象
									let orderInfo = JSON.stringify(obj)			
									
									uni.requestPayment({
										provider: 'wxpay',
										orderInfo: orderInfo, //微信、支付宝订单数据
										success: function (res) {		
											uni.showToast({title:'支付成功'})
											// uni.navigateTo({
											// 	url:'success'
											// })
										},																		
										fail: function (err) {							
											uni.showToast({title:'支付失败', icon:'none'})
											setTimeout(function(){
												uni.navigateTo({
													url:'../user/index?state=1'
												})
											},1500)
										}
									});
								}
								
							}else{
								uni.showToast({title:dat.msg, icon:'none'})	
							}
						})
						
					}
					else{
						uni.showToast({title:data.msg, icon:'none'})
						setTimeout(function(){
							uni.navigateTo({
								url:'../user/index?state=1'
							})
						},1500)
					}
					that.safeword = ''
					that.type = ''
				})
			},
			togglePopup(type) {
				this.type = type;
			},
			radioChange: function(e) {
				let that = this
				that.paymentindex= e.detail.value
				that.paymenttxt = that.typeItems[that.paymentindex].name
				that.paymentype = that.typeItems[that.paymentindex].payment
				setTimeout(function(){
					that.payshow = !that.payshow
				},300)
			},
			// 选择地址
			chooseAdd(){
				uni.navigateTo({
					url:'../user/address/index?type=comfirmOrder'
				})
			},
			showcontent(){
				this.payshow = !this.payshow
			}
		}
	}
	
</script>

<style>
	.uni-radio-wrapper .uni-radio-input {
		width: 32upx;
		height: 32upx;
	}
	.content{min-height: 100vh;background-color: #F9F9F9;}
	.pageHeader{width: 100%;height: 128upx;background-color: #1D84E8;line-height: 128upx;text-align: center;font-size: 36upx;color: #fff;padding-top: 40upx;}
	.generalBack{position: absolute;top:40upx;left:30upx;display: block;}
	.regoodbox{padding: 170upx 0upx 22upx;}
	.orderbox{margin:20upx 30upx;padding-bottom: 94upx;}
	.flex-1{flex:1;}
	.addressbox{background-color: #fff;padding: 24upx;border-radius: 20upx;}
	.addressicon{width: 26upx;height: 40upx;margin-right: 20upx;}
	.abuotmsg{font-size: 28upx;color: #333;}
	.fingle{height: 22upx;width: 12upx;}
	.fingle-up{transform: rotate(90deg);}
	.eliplis{overflow: hidden;white-space: nowrap;text-overflow: ellipsis}
	.goods-info{overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:2;}
	.paybox{background-color: #fff;border-radius: 20upx;}
	.label-2-text{font-size: 28upx;color: #333;margin-left: 20upx;}
	.choosetype{padding: 20upx 40upx 20upx 0;font-size: 30upx;color: #333;margin-top: 24upx;text-indent: 20upx;font-size: 26upx;}
	.action-section {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 95;
		display: flex;
		align-items: center;
		width: 100%;
		height: 94upx;
		background: #fff;
	}
	.ordersub::after{border: none;}
	.ordersub{color: #fff;font-size: 30upx;border:none;display: block;width:210upx;background-color:#EC6104;padding: 0;margin:0;}
	.uni-tip {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		padding: 15px 0;
		width: 300px;
		background-color: #fff;
		border-radius: 10px;
	}
	
	.uni-tip-title {
		margin-bottom: 10px;
		text-align: center;
		font-weight: bold;
		font-size: 16px;
		color: #333;
	}
	
	.uni-tip-content {
		padding: 20px 0;
		text-align: center;
		font-size: 16px;
		color: #666;
	}
	
	.uni-tip-group-button {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding-top: 15px;
		border-top: 1px solid #eee
	}
	
	.uni-tip-button {
		flex: 1;
		text-align: center;
		font-size: 14px;
		color: #3b4144;
	}
</style>
